/* eslint-disable prettier/prettier */
import {
  FormInst,
  NButton,
  NForm,
  NFormItem,
  NInput,
  NModal,
  NSelect,
  NSpace,
  useMessage
} from 'naive-ui'
import { defineComponent, ref, watchEffect } from 'vue'
import styles from './index.module.scss'
import { SelectOptionsType } from '@/views/system/role/types'
import { editMenu, getMenuListAll } from '@/service/modules/system-menu'

const props = {
  propModal: {
    type: Boolean,
    default: true
  },
  value: {
    type: Boolean,
    default: false
  },
  itemData: {
    type: Object,
    default() {
      return {}
    }
  }
}

const edit = defineComponent({
  name: 'edit',
  props,
  emits: ['closeModal'],
  setup(props, { emit }) {
    const editForm = ref({
      menuType: undefined,
      menuName: '',
      parentId: '',
      url: '',
      icon: '',
      perms: '',
      status: undefined,
      remark: ''
    })

    const rules = {
      menuType: { required: true, message: '请输入菜单类型', trigger: 'blur' },
      menuName: { required: true, message: '请输入菜单名称', trigger: 'blur' },
      url: { required: true, message: '请输入路由地址', trigger: 'blur' },
      icon: { required: true, message: '请输入路由参数', trigger: 'blur' },
      perms: { required: true, message: '请输入权限标识', trigger: 'blur' }
    }

    const message = useMessage()

    const editSubmit = function () {
      editFormRef.value?.validate((err) => {
        if (!err) {
          editMenu(editForm.value)
            .then((res: any) => {
              message.success(res.msg ? res.msg : '创建成功')
              emit('closeModal', true)
            })
            .catch((err: any) => {
              message.error(err.msg ? err.msg : '接口未知错误')
            })
        }
      })
    }

    const editFormRef = ref<FormInst | null>(null)

    const onCloseModal = function () {
      emit('closeModal', true)
    }

    // @ts-ignore
    const statusOptions: SelectOptionsType = [
      {
        label: '启用',
        value: '0'
      },
      {
        label: '禁用',
        value: '1'
      }
    ]

    const DataScopeOptions = {
      '1': '全部数据权限',
      '2': '本人数据权限',
      '3': '本部门数据权限',
      '4': '本部门及以下数据权限'
    }

    const dataScopeOptions = ref([])

    for (const dataScopeOptionsKey in DataScopeOptions) {
      dataScopeOptions.value.push({
        // @ts-ignore
        label: DataScopeOptions[dataScopeOptionsKey],
        // @ts-ignore
        value: dataScopeOptionsKey
      })
    }

    const menuOptions = [
      {
        label: 'Rubber Soul',
        key: 'Rubber Soul'
      }
    ]

    const handleUpdateValue = function () {}

    const menuTypeOptions = ref([])

    const MenuTypeOptions = {
      M: '目录',
      C: '菜单',
      F: '按钮'
    }

    for (const menuTypeOptionsKey in MenuTypeOptions) {
      menuTypeOptions.value.push({
        // @ts-ignore
        label: MenuTypeOptions[menuTypeOptionsKey],
        // @ts-ignore
        value: menuTypeOptionsKey
      })
    }

    watchEffect(() => {
      // @ts-ignore
      editForm.value = props.itemData
    })

    const parentMenuList = ref([])

    getMenuListAll().then((res: any) => {
      parentMenuList.value = res
    })

    return {
      editForm,
      rules,
      editSubmit,
      editFormRef,
      message,
      onCloseModal,
      statusOptions,
      dataScopeOptions,
      menuOptions,
      handleUpdateValue,
      menuTypeOptions,
      parentMenuList
    }
  },
  render() {
    return (
      <NSpace vertical>
        <NModal
          v-model:show={this.$props.propModal}
          preset='card'
          class={styles['modal-hive']}
          title='编辑'
          size='huge'
          bordered={false}
          on-close={this.onCloseModal}
        >
          <NForm
            model={this.editForm}
            rules={this.rules}
            label-placement='left'
            ref='editFormRef'
          >
            <NFormItem label='菜单类型' label-width='120px' path='menuType'>
              <NSelect
                v-model:value={this.editForm.menuType}
                placeholder='请选择菜单类型'
                // @ts-ignore
                options={this.menuTypeOptions}
              ></NSelect>
            </NFormItem>
            <NFormItem label='菜单名称' label-width='120px' path='menuName'>
              <NInput
                v-model:value={this.editForm.menuName}
                placeholder='请输入菜单名称'
              ></NInput>
            </NFormItem>
            <NFormItem label='上级菜单' label-width='120px' path='parentId'>
              <NSelect
                v-model:value={this.editForm.parentId}
                placeholder='请选择上级菜单'
                // @ts-ignore
                options={this.parentMenuList}
                labelField={'menuName'}
                valueField={'menuId'}
              ></NSelect>
            </NFormItem>
            <NFormItem label='路由地址' label-width='120px' path='url'>
              <NInput
                v-model:value={this.editForm.url}
                placeholder='请输入路由地址'
              ></NInput>
            </NFormItem>
            <NFormItem label='路由参数' label-width='120px' path='icon'>
              <NInput
                v-model:value={this.editForm.icon}
                placeholder='请输入路由参数'
              ></NInput>
            </NFormItem>
            <NFormItem label='路由标识' label-width='120px' path='perms'>
              <NInput
                v-model:value={this.editForm.perms}
                placeholder='请输入路由标识'
              ></NInput>
            </NFormItem>
            <NFormItem label='状态' label-width='120px' path='status'>
              <NSelect
                v-model:value={this.editForm.status}
                placeholder='请选择状态'
                // @ts-ignore
                options={this.statusOptions}
              ></NSelect>
            </NFormItem>
            <NFormItem label='备注' label-width='120px' path='remark'>
              <NInput
                v-model:value={this.editForm.remark}
                placeholder='请输入备注'
              ></NInput>
            </NFormItem>
            <NFormItem>
              <NSpace>
                <NButton onClick={this.editSubmit}>提交</NButton>
              </NSpace>
            </NFormItem>
          </NForm>
        </NModal>
      </NSpace>
    )
  }
})

export default edit
